<template>
  <div class="message-manage">
    <el-table :data="messageStore.messages" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="content" label="内容" show-overflow-tooltip></el-table-column>
      <el-table-column prop="studentName" label="学生" width="120"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      <el-table-column prop="hasUnreadReply" label="状态" width="120">
        <template #default="{ row }">
          {{ row.hasUnreadReply ? '有新回复' : '无新回复' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="showEditDialog(row)" :icon="Edit">修改</el-button>
          <el-button type="info" size="small" @click="showReplyDialog(row)" :icon="ChatDotRound">回复</el-button>
          <el-button type="danger" size="small" @click="messageStore.deleteMessage(row.id)" :icon="Delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 修改留言对话框 -->
    <el-dialog title="修改留言" v-model="editDialogVisible" width="40%">
      <el-form :model="editForm" label-width="80px" :rules="formRules" ref="editFormRef">
        <el-form-item label="标题" prop="title">
          <el-input v-model="editForm.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="editForm.content" type="textarea" :rows="4"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateMessage" :icon="Edit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 回复留言对话框 -->
    <el-dialog title="回复留言" v-model="replyDialogVisible" width="40%">
      <el-form :model="replyForm" label-width="80px" :rules="replyFormRules" ref="replyFormRef">
        <el-form-item label="留言标题" prop="title">
          <el-input v-model="currentMessage.title" disabled></el-input>
        </el-form-item>
        <el-form-item label="留言内容" prop="content">
          <el-input v-model="currentMessage.content" type="textarea" :rows="4" disabled></el-input>
        </el-form-item>
        <el-form-item label="回复内容" prop="replyContent">
          <el-input v-model="replyForm.content" type="textarea" :rows="4"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="replyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="createReply" :icon="ChatDotRound">提交回复</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Edit, Delete, ChatDotRound } from '@element-plus/icons-vue';
import { useMessageStore, Message, MessageUpdateRequest, ReplyCreateRequest } from '@/stores/api/message';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';

const messageStore = useMessageStore();

const editDialogVisible = ref(false);
const replyDialogVisible = ref(false);

const editForm = ref<MessageUpdateRequest>({ id: 0, title: '', content: '' });
const replyForm = ref<ReplyCreateRequest>({ content: '' });
const currentMessage = ref<Message>({ id: 0, title: '', content: '', studentId: 0, studentName: '', hasUnreadReply: false, createTime: '' });

const formRules = ref<FormRules>({
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
});

const replyFormRules = ref<FormRules>({
  replyContent: [{ required: true, message: '请输入回复内容', trigger: 'blur' }],
});

const editFormRef = ref<FormInstance>();
const replyFormRef = ref<FormInstance>();

const showEditDialog = (message: Message) => {
  editForm.value = { id: message.id, title: message.title, content: message.content };
  editDialogVisible.value = true;
};

const showReplyDialog = (message: Message) => {
  currentMessage.value = message;
  replyForm.value = { content: '' };
  replyDialogVisible.value = true;
};

const updateMessage = async () => {
  if (!editFormRef.value) return;
  editFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        await messageStore.updateMessage(editForm.value);
        editDialogVisible.value = false;
      } catch (error) {
        // 错误已在 store 中处理
      }
    }
  });
};

const createReply = async () => {
  if (!replyFormRef.value) return;
  if (!userStore.user?.id || userStore.user.role !== 'TEACHER') {
    ElMessage.error('仅教师可回复留言');
    return;
  }
  replyFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        await messageStore.createReply({
          messageId: currentMessage.value.id,
          teacherId: userStore.user.id,
          content: replyForm.value.content,
        });
        replyDialogVisible.value = false;
      } catch (error) {
        // 错误已在 store 中处理
      }
    }
  });
};

onMounted(() => {
  messageStore.fetchMessages();
});
</script>

<style scoped>
.message-manage {
  padding: 20px;
}
.header {
  margin-bottom: 20px;
}
</style>